<template>
  <div class="rights">
    <div class="box">
      <el-table :data="tableData" style="width: 100%" height="600px" stripe>
        <el-table-column fixed prop="id" label="#" />
        <el-table-column prop="authName" label="权限名称" />
        <el-table-column prop="pid" label="路径" />
        <el-table-column prop="level" label="权限等级">
          <template  #default="scope">
            <but :level="Number(scope.row.level)"> </but>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import but from './button/index.vue'
import { getJurisdictionList } from '@/api/jurisdictionTable'

const tableData = ref()
interface Data {
  data: {
    data: { id: number; authName: string; pid: number; level: string }
  }
}
const fn = async () => {
  try {
    const res = (await getJurisdictionList('list ')) as Data
    tableData.value = res.data.data

  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  fn()
})
</script>

<style scoped lang="scss"></style>
